<template>
	<view class="DetailsImage">
		<text class="Details-title">商品详情</text>
		<!-- <view class="product_info">
			<view v-for="(item,index) in shopData[0]?.equips_details_img" :key="index">
				<image lazy-load="true" src="https://img.js.design/assets/img/66f1635eb50663ba27e923bb.jpg#2a3dba383e4e19a5d373dd95c68867c3" mode="widthFix"></image>
			</view>
		</view> -->
		<view class="product_info">
			<view v-for="(item,index) in 3" :key="index">
				<image lazy-load="true" src="https://img.js.design/assets/img/66f1635eb50663ba27e923bb.jpg#2a3dba383e4e19a5d373dd95c68867c3" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	// const shopData = ref([1,1,1,1,1,1,1,1,1,1,1])
	const props = defineProps({
		  shopData: {
				type: Array,
				default: () => []
		  }
	});
</script>

<style lang="scss" scoped>
	.DetailsImage{
		width: 100%;
		.Details-title{
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			font-weight: 400;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 50rpx;
			margin-bottom: 30rpx;
			&::after{
				display: block;
				content: '';
				width: 22%;
				height: 5rpx;
				background-color: #cacaca;
				border-radius: 50%;
			}
			&::before{
				display: block;
				content: '';
				width: 22%;
				height: 5rpx;
				background-color: #cacaca;
				border-radius: 50%;
			}
		}
		.product_info {
			width: 100%;
			overflow: hidden;
			margin: 0;
			padding: 0;
			view {
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 0;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>